<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three test5-3 灯光参数</title>
    <script src="js/three.js"></script>
    <style>
        #container{
            width:90%;
            height:500px;
            margin:0 auto;
            border:1px dotted violet;
            cursor: pointer;
        }
    </style>
</head>
<body onload="threeStart()">
<div id="container"></div>
</body>
<script>
    var renderer;
    function initThree(){
        width=document.getElementById('container').clientWidth;
        height=document.getElementById('container').clientHeight;
        renderer=new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(width,height);
        document.getElementById('container').appendChild(renderer.domElement);
        renderer.setClearColor(0xffffff,1.0);
    }

    var camera;
    function initCamera(){
        camera=new THREE.PerspectiveCamera(45,width/height,1,1000);
        camera.position.x=600;
        camera.position.y=0;
        camera.position.z=600;
        camera.up.x=0;
        camera.up.y=1;
        camera.up.z=0;
        camera.lookAt({
            x:0,
            y:0,
            z:0
        });
    }

    var light;
    function initLight(){
//        light=new THREE.AmbientLight(0x00ff00);//环境光：多次反射而来的光，无法确定其最初的方向
//        light.position.set(100,100,200);
//        scene.add(light);
//
        //方向光
        light=new THREE.DirectionalLight(0xff0000,1.0);//第一个参数表示灯光的颜色 第二个参数表示灯光的强度
        light.position.set(0,0,1);//灯光的位置不同，最后作用到每个物体表面的效果不一样，看到的每个面的颜色也不一样
        scene.add(light);

        //点光源：这种光源放出的光线来自同一点，且方向辐射自四面八方。PointLight( color, intensity, distance )  color:表示光的颜色   intensity:光的强度，默认是1.0，就是说是100%强度的灯光   distance:光的距离，从光源所在的位置，经过distance这段距离后，光的强度将从intensity衰减为0.默认情况下，这个值为0，表示光源强度不衰减
        light=new THREE.PointLight(0x00ff00,4,400,1);
        light.position.set(0,0,25);
        scene.add(light);
        //聚光灯：这种光源的光线从一个椎体中射出，在被照射的物体上产生聚光的效果
        //THREE.SpotLight( hex, intensity, distance, angle, exponent )
        //函数的参数如下所示：
        //Hex：聚光灯发出的颜色，如0xFFFFFF
        //Intensity：光源的强度，默认是1.0，如果为0.5，则强度是一半，意思是颜色会淡一些。和上面点光源一样。
        //Distance：光的距离，从最大值衰减到0，需要的距离。 默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离Distance时，光源强度为0.
        // Angle：聚光灯着色的角度，用弧度作为单位，这个角度是和光源的方向形成的角度。
        //exponent：光源模型中，衰减的一个参数，越大衰减约快。

        //平行光：又称方向光，是一组没有衰减的平行的光线，类似太阳光的效果。THREE.DirectionalLight = function ( hex, intensity )   color:光的颜色    intensity:光线的强度

        //点光源：是理想化为质点的向四面八方发出光线的光源。指的是从一个点向周围空间均匀发光的光源   点光源的特点是发光部分为一个小圆点，近似一个点

    }

    var scene;
    function initScene(){
        scene=new THREE.Scene();
    }

    var cube;
    function initObject(){
        var geometry=new THREE.CubeGeometry(200,100,50,4,4);
        var material=new THREE.MeshLambertMaterial({color:0xffffff});
        var mesh=new THREE.Mesh(geometry,material);
        mesh.position.set(0,0,0);
        scene.add(mesh);

        var geometry2 = new THREE.CubeGeometry( 200, 100, 50,4,4);
        var material2 = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );
        var mesh2 = new THREE.Mesh( geometry2,material2);
        mesh2.position.set(-100,150,50);
        scene.add(mesh2);

        var mesh3 = new THREE.Mesh( geometry2,material2);
        mesh3.position.set(100,-150,-100);
        scene.add(mesh3);
    }

    function threeStart(){
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        renderer.clear();
        renderer.render(scene,camera);
    }
</script>
</html>